<html>
<head>
  <style>
    body { padding: 20px }
    .row { display: flex }
    button { width: 60px; margin-right: 10px }
  </style>
</head>
<body>
  <h1 class="count"></h1>

  <div class="row">
    <button>--</button>
    <button>++</button>
  </div>

  <p>Broken in deno (looks like a bug on their side - eager exit from bubble)</p>

  <script>
    let count = 0
    const output = document.querySelector('.count')
    const [dec, inc] = document.querySelectorAll('button')

    document.body.onclick = (e) => {
      if (e.target === dec) {
        count--
      } else if (e.target === inc) {
        count++
      }

      render()
    }

    render()

    function render() {
      output.textContent = `Count: ${count}`
    }
  </script>
</body>
</html>